<template>
  <div class="circle-chart-component-box">
    <div class="pie-item" v-if="circleData[0]" :style="{
      background: `conic-gradient(var(--one-color) 0%,transparent ${circleData[0]}%)`,
    }"></div>
    <div class="pie-item" v-if="circleData[1]" :style="{
      background: `conic-gradient(var(--two-color) 0%,transparent ${circleData[1]}%)`,
      transform: `rotate(${(rotateData[0] / 100) * 360}deg)`,
    }"></div>
    <div class="pie-item" v-if="circleData[2]" :style="{
      background: `conic-gradient(var(--three-color) 0,transparent ${circleData[2]}%)`,
      transform: `rotate(${(rotateData[1] / 100) * 360}deg)`,
    }"></div>
    <div class="pie-item" v-if="circleData[3]" :style="{
      background: `conic-gradient(var(--four-color) 0%,transparent ${circleData[3]}%)`,
      transform: `rotate(${(rotateData[2] / 100) * 360}deg)`,
    }"></div>
    <div class="pie-item" v-if="circleData[4]" :style="{
      background: `conic-gradient(var(--five-color) 0%,transparent ${circleData[4]}%)`,
      transform: `rotate(${(rotateData[3] / 100) * 360}deg)`,
    }"></div>
  </div>
</template>

<script>
export default {
  name: 'circleChart',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      circleData: [10, 10, 10, 10, 10],
      rotateData: [10, 10, 10, 10],
    }
  },

  computed: {
    total() {
      return this.data?.reduce((prev = 0, curr) => prev + curr) || 1000
    },
  },

  watch: {
    data: {
      handler(newValue) {
        console.log(newValue)
        if (newValue.length > 0) {
          this.circleData = [
            Math.ceil((newValue[0] / this.total) * 100) || 0,
            Math.ceil((newValue[1] / this.total) * 100) || 0,
            Math.ceil((newValue[2] / this.total) * 100) || 0,
            Math.ceil((newValue[3] / this.total) * 100) || 0,
            Math.ceil((newValue[4] / this.total) * 100) || 0,
          ]

          const num1 = Math.ceil((newValue[0] / this.total) * 100) || 0
          const num2 = num1 + (Math.ceil((newValue[1] / this.total) * 100) || 0)
          const num3 = num2 + (Math.ceil((newValue[2] / this.total) * 100) || 0)
          const num4 = num3 + (Math.ceil((newValue[3] / this.total) * 100) || 0)
          this.rotateData = [num1, num2, num3, num4]
        }
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
.circle-chart-component-box {
  position: relative;
  --one-color: #ff67a8;
  --two-color: #6eec9b;
  --three-color: #f97b7b;
  --four-color: #4ae4f0;
  --five-color: #f4aa6a;

  .pie-item {
    position: absolute;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    mask: radial-gradient(transparent,
        transparent 47px,
        #000 48px,
        #000 48px,
        #000 100%);

    &:nth-child(1)::before {
      background: linear-gradient(90deg,
          var(--one-color) 50%,
          transparent 51%,
          transparent 100%);
    }

    &:nth-child(2)::before {
      background: linear-gradient(90deg,
          var(--two-color) 50%,
          transparent 51%,
          transparent 100%);
    }

    &:nth-child(3)::before {
      background: linear-gradient(90deg,
          var(--three-color) 50%,
          transparent 51%,
          transparent 100%);
    }

    &:nth-child(4)::before {
      background: linear-gradient(90deg,
          var(--four-color) 50%,
          transparent 51%,
          transparent 100%);
    }

    &:nth-child(5)::before {
      background: linear-gradient(90deg,
          var(--five-color) 50%,
          transparent 51%,
          transparent 100%);
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      width: 24px;
      height: 24px;
      top: 0;
      left: 60px;
      border-radius: 50%;
    }
  }
}
</style>